<template>
	<view>
		<view class="title">
			欢迎使用 ~
		</view>
		<view class="main">
			<view>用户登录</view>
			<input type="number"  auto-focus placeholder="手机号" maxlength="11" v-model="phoneNum"/>
			<input type="password"    placeholder="密码"  maxlength="11" v-model="password"/>
			<view>我已阅读并同意<text> 用户手册</text> 和 <text> 隐私政策</text></view>
		</view>

		<view class="button" @click="loginForm">立即登录</view>
		<view class="reg">还没账号？<text @click="goRegister">立即注册</text></view>
	</view>
</template>

<script>
	import {login} from "../../api/index.js"
	export default {
		data() {
			return {
				phoneNum:"",
				password:""
			}
		},
		methods: {
			goRegister(){
				// 跳转到注册页面
				uni.navigateTo({
					url:"/pages/register/register"
				})
			},
			loginForm(){
				// 组合数据
				let obj = {
					phoneNum:this.phoneNum,
					password:this.password
				}
				console.log(obj);
				// 判断输入的是否为空
				if(!this.phoneNum.trim() || !this.password.trim()){
					uni.showToast({
						title:"不能为空"
					})
					return
				}
				login(obj).then(res=>{
					if(res.data.status === 0){
						console.log(res,"登录返回的数据");
						uni.showToast({
							title:"登录成功"
						})
						// 跳转页面
						setTimeout(()=>{
							// 跳转到首页面 使用switchTab 因为首页是tabbar页面所以需要用switchTab跳转
							uni.switchTab({
								url:"/pages/index/index"
							})
						},800)
						// 把返回的token 和 userInfo存到本地 uni.setStorageSync
						uni.setStorageSync("name","陈城")
						uni.setStorageSync("token",res.data.token)
						uni.setStorageSync("userInfo",res.data.userInfo)
					} else {
						uni.showToast({
							title:"登录失败"
						})
					}
				})			
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/login/login.wxss */
	page{
		background: linear-gradient(to bottom, #b2cfed, #fff);
	}
	.title{
		/* border: 1rpx solid red; */
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 38rpx;
		font-weight: 600;
	}
	.main{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.main>view:first-child{
		margin-top: 50rpx;
		font-size: 35rpx;
		font-weight: 600;
		margin-bottom: 70rpx;
	}

	.main input{
		background-color: #fff;
		width: 95%;
		margin: 35rpx auto;
		height: 90rpx;
		border-radius: 45rpx;
		padding-left: 20rpx;
		font-size: 30rpx;
		box-shadow: 0 5rpx 5rpx 0 rgba(131, 131, 131, 0.5);

	}
	.main>view:last-child{
		font-size: 24rpx;
		color: rgb(134, 134, 134);
		margin-left: 20rpx;
	}
	.main>view:last-child text, .reg text{
		color: #6594f4;
	}

	.button{
		width: 90%;
		margin: 0 auto;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #a7c5fb;
		border-radius: 45rpx;
		color: #fff;
		margin-top: 55rpx;
	}
	.button:hover{
		background-color: #266EFF;
	}
	.reg{
		text-align: center;
		margin-top: 30rpx;
		font-size: 24rpx;
	}
	.btn-disabled {
		pointer-events: none; 
	}

</style>
